<template>
 <transition name="overlay" @before-enter="enter" @after-leave="handleAfterLeave" @before-leave="handleBeforeLeave" >
    <span class="overlay-body" :style="overlayStyle" >
        <span @animationend="end()" class="overlay-text" v-html="message"></span>
    </span>
 </transition>
</template>

<script>
export default {
  name: 'Overlay',
  data() {
    return {
      message: '',
      show: false,
      duration: 4000, // 持续时间
      keeptime: 4500, // 停留时间
    }
  },
  props: {

  },
  components: {
  },
  computed: {
    overlayStyle() {
      return {
        '--overlay-enter': (this.keeptime)+'ms',
        '--overlay-duration': (this.duration-this.keeptime)+'ms',
      };
    },
  },
  methods: {
    startTimer() {
      this.show=true
      if (this.keeptime > 0) {
        this.timer = setTimeout(() => {
          this.show=false
        }, this.keeptime);
      }
    },
    enter() {
      debugger
    },
    handleBeforeLeave() {
      debugger
    },
    handleAfterLeave() {
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  mounted() {
    this.startTimer();
  },
}
</script>

<style scoped lang="less">
    .overlay-body{
        position: relative;
    }
    .overlay-text{
        opacity: 1;
        position: absolute;
    }
    .overlay-enter-active{
        transition: 450ms;
    }
    .overlay-leave-active {
        transition: var(--overlay-duration);
    }
    .overlay-enter-to{
      color:#000
    }
    .overlay-leave-to {
        opacity: 0;
    }

    .overlay-enter-active {
      transition: all .8s ease;
    }
    .overlay-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .overlay-enter, .overlay-leave-to
    /* .overlay-leave-active for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
    }
</style>
